<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渲染菜单栏</title>
    <link rel="stylesheet" href="../css/渲染菜单栏.css">
</head>
<body>
<!-- <div class="box"> -->
    <div class="header">
        <img src="../img/logo.png" alt="" class="img1">
        <img src="../img/下载.png" alt="" class="img2">
    </div>
    <section id="search">
        <input type="text" class="shuru" placeholder="请输入你想比价的产品">
        <div class="sousuo">搜索</div>
    </section>
    <div class="nav">
        <!-- <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div>
        <div>
            <a href="">
                <span>
                    <img src="../../img/1.jpg" alt="">
                </span>
            </a>
            <p class="in_name">比价搜索</p>
        </div> -->
    </div>
    <div class="zhekou">
        <p>超值折扣推荐</p>
        <a href="">
            <div>></div>
        </a>
    </div>
    <ul class="chanpin">
        <!-- <li>
            <a href="">
                <div class="left">
                    <img src="../../img/10.jpg" alt="">
                </div>
                <div class="right">
                    <div class="shang">
                        <sapn class="xinxi">
                            移动端凑单品：海天 鲜味 生抽 1.28L
                        </sapn>
                        <span class="jia">10.9元</span>
                    </div>
                    <div class="xia">
                        <p class="jingdong">
                            京东商城|<span>10-25 14:10</span>
                        </p>
                        <em class="ping">有一人评论</em>
                    </div>
                </div>
            </a>
        </li> -->
    </ul>
<!-- </div>   -->
    <section class="footer">
        <div class="more">
            <a href="">更多信息优惠>></a>
        </div>
        <div class="zhekou">
            <p>品牌排行</p>
            <a href="">
                <div>></div>
            </a>
        </div>
        <div class="row">
            <div>登入</div>
            <div>注册</div>
            <div class="fanhui">返回顶部</div>
        </div>
        <a href="">
            <p class="lie">
                手机APP下载 万锋智慧商城手机版 -- 掌上比价平台
            </p>
        </a>
        <p class="last">
            chst.vip:8081/crm
        </p>
    </section>
</body>
<script src="../../jQuery.js"></script>
<script>
    let nav = document.querySelector('.nav');
    let arr = [];
    const xhr1 = new XMLHttpRequest();
    xhr1.open('get','http://chst.vip:1234/api/getindexmenu',false);
    xhr1.onload = function(){
        if(xhr1.status === 200){
            let res1 = JSON.parse(xhr1.responseText);
            // console.log((res1.result));
            let lis = '';
            let regExp = /^<[^<]+\s+src="([^''""]*)"/;
            res1.result.forEach((item,index) => {
                let url = res1.result[index].img.match(regExp)[1];
                // console.log(url);    
                // tu  http://chst.vip:8081/for-stu/wfzh/
                lis += `<div>
                            <a href="${item.titlehref}">
                                <span>
                                    <img src="http://chst.vip:8081/for-stu/wfzh/${url}" alt="${item.alt}">
                                </span>
                            </a>
                            <p class="in_name">${item.name}</p>
                        </div>`
            });
            nav.innerHTML = lis;
        }
    }
    xhr1.send(null);

    let box = document.querySelector('.chanpin');
    const xhr2 = new XMLHttpRequest();
    xhr2.open('get','http://chst.vip:1234/api/getmoneyctrl',false);
    xhr2.onload = function(){
        if(xhr2.status === 200){
            let res2 = JSON.parse(xhr2.responseText)
            // console.log(res2.result);
            let lis2 = '';
            let regExp = /^<[^<]+\s+src="([^''""]*)"/;
            // <img src=\"http://cacheimg.manmanbuy.com/r_img/cacheimg.aspx?width=600&amp;imgurl=http://a.manmanbuy.com:8013/cuxiaoPic/201610/201610001412282758.jpg
            res2.result.forEach((item,index) =>{
                let url = res2.result[index].productImgSm.match(regExp)[1].split('=')[2];
                lis2 += `<li>
                            <a href="indexXiang.html?productid=${item.productId}">
                                <div class="left">
                                    <img src="${url}">
                                </div>
                                <div class="right">
                                    <div class="shang">
                                        <sapn class="xinxi">
                                            ${item.productName}
                                        </sapn>
                                        <span class="jia">${item.productPinkage}</span>
                                    </div>
                                    <div class="xia">
                                        <p class="jingdong">
                                            ${item.productFrom}|<span>${item.productTime}</span>
                                        </p>
                                        <em class="ping">${item.productComCount}</em>
                                    </div>
                                </div>
                            </a>
                        </li>`
            });
            box.innerHTML = lis2;
        }
    }
    xhr2.send(null);
    
    //返回顶部
    $('.fanhui').click(function(){
            $('html,body').animate({scrollTop:0},1000)
        })
    
    let divall = document.querySelectorAll('.nav div');
    let gengduo =  divall[7];
    // console.log(gengduo);
    var flag = true;
    gengduo.onclick = function(){
                if(flag){
                    divall[8].style.display = 'none';
                    divall[9].style.display = 'none';
                    divall[10].style.display = 'none';
                    divall[11].style.display = 'none';
                    flag = false;
                }else{
                    divall[8].style.display = 'flex';
                    divall[9].style.display = 'flex';
                    divall[10].style.display = 'flex';
                    divall[11].style.display = 'flex';
                    flag = true;
                } 
    };
</script>
</html>